<template>
  <div class="contents-container">
    <div class="search-area">
      <span class="lable-span"><i class="el-icon-search" /> 用户</span>
      <el-input v-model="listQuery.serchName" style="width: 180px;" size="mini" placeholder="请输入用户进行查询" />
      <span class="lable-span"><i class="el-icon-search" /> 时间</span>
      <el-date-picker
        v-model="listQuery.serchDate"
        type="daterange"
        unlink-panels
        size="mini"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
        :picker-options="timeOption"
      />
      <el-button size="mini" class="ml-15" type="primary" @click="getDataList(1)">查询</el-button>
      <el-button size="mini" class="ml-15" @click="research">重置</el-button>
    </div>
    <el-table v-loading="listLoading" :data="ListData" border fit highlight-current-row style="width: 100%;">
      <el-table-column label="日报姓名" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.bannerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目名称" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.bannerOrder }}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属阶段" align="center" width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.bannerName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日报时间" align="center" width="180">
        <template slot-scope="scope">
          <span>{{ scope.row.imgUrl }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日报说明" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.imgDesc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="上报人角色" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.remark }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日报图片" align="center" width="150" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          <el-image contain :src="scope.row.srcList[0]" :preview-src-list="srcList" alt="" @click="gteImgList(scope.row)" />
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page-index.sync="listQuery.pageIndex"
      :page-size.sync="listQuery.pageSize"
      @pagination="getListData"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
export default {
  name: 'DayReport',
  components: {
    Pagination
  },
  data() {
    return {
      editable: false, // 日期选择器不可手动写入
      listLoading: false,
      total: 10, // 总数
      timeOption: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6
        }
      },
      listQuery: {
        pageIndex: 1, // 当前页码
        pageSize: 5, // 每页数量
        serchName: '', // 用户名
        serchDate: '' // 日报上传日期
      },
      srcList: [], // 查看大图，日报列表
      ListData: [] // 列表数据
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    getListData() {
      this.ListData = [{
        id: 1,
        bannerName: '张三',
        phone: '13300000000',
        bannerOrder: '金山小区402室',
        imgUrl: '2021-02-21 18:20:00',
        imgDesc: '案例展示',
        remark: '水电师傅',
        srcList: [
          'https://www.qzyxs.com/upload/20210426/1619417411818001.jpg',
          'https://www.qzyxs.com/upload/20210426/1619417520852001.jpg'
        ]
      },
      {
        id: 2,
        bannerName: '张三',
        phone: '13300000000',
        bannerOrder: '金山小区402室',
        imgUrl: '2021-02-21 18:20:00',
        imgDesc: '案例展示',
        remark: '水电师傅',
        srcList: [
          'https://www.qzyxs.com/upload/20210426/1619417520852001.jpg',
          'https://www.qzyxs.com/upload/20210426/1619417411818001.jpg'
        ]
      },
      {
        id: 3,
        bannerName: '张三',
        phone: '13300000000',
        bannerOrder: '金山小区402室',
        imgUrl: '2021-02-21 18:20:00',
        imgDesc: '案例展示',
        remark: '水电师傅',
        srcList: [
          'https://www.qzyxs.com/upload/20210426/1619417524900001.jpg',
          'https://www.qzyxs.com/upload/20210426/1619417527874001.jpg'
        ]
      },
      {
        id: 4,
        bannerName: '张三',
        phone: '13300000000',
        bannerOrder: '金山小区402室',
        imgUrl: '2021-02-21 18:20:00',
        imgDesc: '案例展示',
        remark: '水电师傅',
        srcList: [
          'https://www.qzyxs.com/upload/20210426/1619417527874001.jpg',
          'https://www.qzyxs.com/upload/20210426/1619417524900001.jpg'
        ]
      },
      {
        id: 5,
        bannerName: '张三',
        phone: '13300000000',
        bannerOrder: '金山小区402室',
        imgUrl: '2021-02-21 18:20:00',
        imgDesc: '案例展示',
        remark: '水电师傅',
        srcList: [
          'https://www.qzyxs.com/upload/20210426/1619417520852001.jpg',
          'https://www.qzyxs.com/upload/20210426/1619417527874001.jpg'
        ]
      }
      ]
    },
    getDataList(e) {
      this.listQuery.pageIndex = 1
      this.getListData()
    },
    gteImgList(e) {
      this.srcList = e.srcList
    },
    research() {
      this.listQuery = {
        pageIndex: 1, // 当前页码
        pageSize: 5, // 每页数量
        serchName: '', // 用户名
        serchDate: '' // 日报上传3日期
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
